<template>
  <div class="activityDataPage">
    <div class="header">
      <img src="@/assets/images/left-jt.png" alt="" class="img" @click="backHandle">
      <span>活动名称</span>
    </div>
    <div class="report">
      <div class="report-item" v-for="item in reportList" :key="item.name" :style="{ background: item.bgColor }">
        <div class="report-item-name">
          <span>{{ item.name }}</span>
          <el-tooltip :content="item.tipText" placement="top-start">
            <img :src="tipsIcon" alt="">
          </el-tooltip>
        </div>
        <div class="report-item-value" :style="{ color: item.textColor }">{{ item.value }}</div>
      </div>
    </div>
    <SeachTable class="mySeachTable" :tableType="1" ref="searchTableRef" :tableLoading="tableLoading" :isShowPage="false"
      :tableConfig="tableConfig" :isBtn="false" :isSearch="false" :isReset="false" :isAdditional="false" :tableData="tableData">
    </SeachTable>
  </div>
</template>

<script setup>
import { useImportImg } from '@/hooks';
import { useActivityDataPage, useCurd } from './Hooks/activityDataPage'
const tipsIcon = useImportImg('warning-circle')
const router = useRouter()

const { reportList } = useActivityDataPage()
const { tableLoading,
  tableData,
  handlerSearch,
  tableConfig } = useCurd()
const backHandle = () => {
  router.back()
}

const pageId = ref(null)
onActivated(()=>{
  if(router.query?.id && router.query.id !== pageId.value){
    pageId.value = router.query.id
    handlerSearch(pageId.value)
  }
})
</script>

<style lang="less" scoped>
div {
  box-sizing: border-box;
}
.activityDataPage{
  position: relative;
}

.header {
  position: sticky;
  top: 0;
  padding-left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  border-bottom: 1px solid #DDD;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF;

  .img {
    cursor: pointer;
    width: 16px;
    height: 16px;
    position: relative;
  }
}

.report {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 0 24px;

  .report-item {
    display: flex;
    width: 200px;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 4px;

    .report-item-name {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 14px;

      img {
        width: 14px;
        height: 14px;
      }
    }

    .report-item-value {
      font-family: "DIN";
      font-size: 24px;
      font-weight: 500;
      line-height: 24px;
    }
  }
}
.mySeachTable{
  :deep(.search-table){
    .line-block{
      display: none;
    }
    .table{
      padding: 0 24px;
    }
    .jg{
      display: none;
    }
  }
}
</style>